<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
    .div-content{

        background-color: #fff;
        border-radius: 3px;
        padding: 10px;
    }
    .table-search-fieldset {
        margin: 0;
        border: 1px solid #e6e6e6;
        padding: 10px 20px 5px 20px;
        color: #6b6b6b;
    }
</style>
</head>
<body>
<div class="div-content">
    <form class="layui-form layui-form-pane" action="" id="form-search">
    <fieldset class="table-search-fieldset">
        <legend>搜索条件</legend>
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="name"  placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-inline">
                <label class="layui-form-label">生日筛选</label>
                <div class="layui-input-inline" style="width: 110px;">
                    <input type="text" name="startDate" placeholder="开始日期" autocomplete="off" class="layui-input date">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 110px;">
                    <input type="text" name="endDate" placeholder="结束日期" autocomplete="off" class="layui-input date">
                </div>
            </div>

            <div class="layui-inline">
                <button  id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                    <i class="layui-icon layui-icon-search"></i>
                    搜索
                </button>
                <button  id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
                    <i class="layui-icon layui-icon-fonts-clear"></i>
                    清空条件
                </button>
            </div>
        </div>
    </fieldset>
    </form>
    <!--数据表格-->
    <table id="table-emp" lay-filter="table-emp-filter"></table>

    <script type="text/html" id="emp-toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm layui-btn layui-btn-danger" lay-event="delete">删除</button>
        </div>
    </script>

    <script type="text/html" id="col-emp-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="convertSex">
        {{#
            if(d.sex=='M'){
                return '男';
            }else if(d.sex=='F'){
                return '女';
            }else{
                return '妖';
            }

        }}
    </script>

</div>

<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">
        function refreshTable() {
        $("#btn-search").click();//点击事件
        $("#btn-reset").click();//清空事件
    }
    
    layui.use(['laydate','table','form'], function(){
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;

        //表格头部工具栏监听
        table.on('toolbar(table-emp-filter)', function(obj){
            if(obj.event=='add'){
                layer.open({
                    type:2,
                    title:'新增员工',
                    area:['100%','100%'],
                    content:'/add/ui'
                })
            }else if(obj.event=='delete'){
               var checkStatus=table.checkStatus('table-emp');
               if(checkStatus.data.length==0){
                   layer.msg('您没有选中任何的数据',{title:'错误提示',icon:2,anim:6,time:1000});
                   return false;
               }
               //创建一个数组
                var idArr=new Array();
                $(checkStatus.data).each(function () {
                    idArr.push(this.empId);
                });

                layer.confirm('您确认删除您选中的数据？',{icon:3,title:'删除确认'},function (index) {
                    //异步请求删除数据，结果提示，刷新表格
                    var url='emp/'+idArr.join(",");
                    var params={
                        _method:"DELETE"
                    }
                    $.post(url,params,function (response){
                        if(response.code==0){
                            layer.msg(response.message,{icon: 1,anim: 1,time: 1000});
                            refreshTable();
                        }else{
                            layer.alert('❌错误',{icon: 2,anim:6});
                        }
                    });
                    layer.close(index);
                });

            }

        });

        //执行一个laydate实例
        laydate.render({
            elem: '.date' //指定元素
        });

        //员工表格渲染
        table.render({
            elem: '#table-emp'
            ,url: '/emp/list' //数据接口
            ,limits:[5,10,15,20]
            ,toolbar:'#emp-toolbar'
            ,page: true //开启分页
            ,cols: [[ //表头
                {type:'checkbox',width: 60}
                ,{field: 'empId', title: '员工ID', width:120, sort: true,align:'center'}
                ,{field: 'name', title: '名字', width:80,align:'center'}
                ,{field: 'sex', title: '性别', width:80, sort: true,align:'center' ,templet:'#convertSex'}
                ,{field: 'age', title: '年龄', width:80,align:'center'}
                ,{field: 'sal', title: '薪资', width: 80,align:'center'}
                ,{field: 'birthday', title: '生日', width: 140, sort: true,align:'center'}
                ,{field: 'deptName', title: '部门', width: 120, sort: true,align:'center'}
                ,{field: 'address', title: '家庭住址'}
                ,{title: '操作', width: 170,align: 'center',toolbar:'#col-emp-toolbar'}
            ]]
        });

        //监听表单提交
        form.on('submit(btn-search-filter)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            table.reload('table-emp', {
                where: { //设定异步数据接口的额外参数，任意设
                    name: data.field.name,
                    startDate: data.field.startDate,
                    endDate: data.field.endDate
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听操作列
        table.on('tool(table-emp-filter)',function (obj) {
           var data=obj.data;//获取当前行的数据
           var layEvent=obj.event;//获取layEvent相对应的值
            if(layEvent=='edit'){
                layer.open({
                    type:2,
                    title:'修改员工',
                    area:['100%','100%'],
                    content:'http://localhost:8888/emp/'+data.empId
                })

            }else if(layEvent=='del'){
                layer.confirm('您确认删除'+data.name+'的数据？',{icon:3,title:'删除确认'},function (index) {
                    //异步请求删除数据，结果提示，刷新表格
                    var url='emp/'+data.empId;
                    var params={
                        _method:"DELETE"
                    }
                    $.post(url,params,function (response){
                        if(response.code==0){
                            layer.msg(response.message,{icon: 1,anim: 1,time: 1000});
                            refreshTable();
                        }else{
                            layer.alert('❌错误',{icon: 2,anim:6});
                        }
                    });
                    layer.close(index);
                });
            }

        });
    });
</script>
</body>
</html>